<template>
  <div class="content_list">
    <ul class="list_outer">
      <li v-for="(item, index) in tabList" :key="index" :class="['list_one', {'active':active === index }]" @click="changeTab(item.name, index)">{{ item.label }}</li>
    </ul>
    <component :is="activeTab" :active="activeTab" style="flex: 1;" />
  </div>
</template>
<script>
import group from './tegralList.vue';
import personal from './tegralList.vue';
import coach from './tegralList.vue';
import leader from './tegralList.vue';
import areas from './tegralList.vue';
export default {
  components: { group, personal, coach, leader, areas },
  data () {
    return {
      activeTab: 'group',
      tabList: [
        {
          label: '团体积分排名',
          name: 'group',
          productStatus: '',
          component: group
        },
        {
          label: '个人积分排名',
          name: 'personal',
          productStatus: 'personal',
          component: personal
        },
        {
          label: '教练积分排名',
          name: 'coach',
          productStatus: 'coach',
          component: coach
        },
        {
          label: '领队积分排名',
          name: 'leader',
          productStatus: 'leader',
          component: leader
        },
        {
          label: '区域排名',
          name: 'areas',
          productStatus: 'areas',
          component: areas
        }
      ],
      active: 0
    };
  },
  created() {
  },
  methods: {
    changeTab(name, index) {
      this.activeTab = name;
      this.active = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.content_list {
  width: 1280px;
  min-height: 600px;
  margin: 0 auto;
  padding: 40px 10px 15px 10px;
  background: #ffffff;
  border-radius: 0px 0px 8px 8px;
  box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.10);
  display: flex;
}
.list_outer {
  width: 180px;
  line-height: 48px;
}
.list_one {
  width: 100%;
  height: 48px;
  font-size: 16px;
  cursor: pointer;
  padding-left: 24px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #353434;
  text-align: left;
}
.active {
  color: #fff;
  background: #31456c;
  border-radius: 4px;
}
.list_one:hover {
  color: #fff;
  background: #31456c;
  border-radius: 4px;
}
</style>
